<template>
	<!-- 申报信息查询页面 -->
	<view class="sbzlxxcx">
		<view class="title">
			<text>申报缴款查询</text>
		</view>
		<view class="tabPage">
			<view :class="tabAction=='tabItem1'?'tabAction':''" @click="tabChange('item1')">
				<text>我是出租方</text>
				<uni-badge class="uni-badge-left-margin slTip" />
			</view>
			<view :class="tabAction=='tabItem2'?'tabAction':''" @click="tabChange('item2')">
				<text>我是承租方</text>
				<uni-badge class="uni-badge-left-margin slTip" />
			</view>
		</view>
		<view>
			<view class="sbnsrxx">
				<view style="margin-left: 20rpx;">当前纳税人：{{userInfo.xm}}（{{userInfo.shxydm}}）</view>
			</view>
		</view>
		<view>
			<view class="zlform">
				<uni-forms :value="{}" ref="form" validate-trigger="bind" err-show-type="undertext">
					<view class="zlformItem">
						<uni-forms-item name="address" label="市" label-width="100rpx" required>
							<view class="selectXlk">
								<picker @change="cityChange" :value="cityIndex" :range="cityArr">
									<view>{{cityArr[cityIndex]}}</view>
								</picker>
							</view>
						</uni-forms-item>
						<uni-forms-item name="address" label="区(县)" label-width="100rpx">
							<view class="selectXlk">
								<picker @change="countyChange" :value="countyIndex" :range="countyArr">
									<view>{{countyArr[countyIndex]}}</view>
								</picker>
							</view>
						</uni-forms-item>
					</view>
					<view class="zlformItem">
						<uni-forms-item name="address" label="纳税人名称" label-width="100rpx">
							<input type="text" v-model="nsrmc" placeholder="请输入" class="uni-input-border" />
						</uni-forms-item>
						<uni-forms-item name="address" label="房屋地址" label-width="100rpx">
							<input type="text" v-model="address" placeholder="请输入" class="uni-input-border" />
						</uni-forms-item>
					</view>
					<uni-forms-item name="sbrq" label="申报日期" label-width="100rpx">
						<view class="jkrqxz">
							<view class="jksjxz">
								<picker mode="date" :value="sbrqq" :start="startDate" :end="endDate"
									@change="sbrqqChange" class="sjxz">
									<view class="selectXlk">{{sbrqq}}</view>
								</picker>
								<view style="padding: 0 10rpx;">至</view>
								<picker mode="date" :value="sbrqz" :start="startDate" :end="endDate"
									@change="sbrqzChange" class="sjxz">
									<view class="selectXlk">{{sbrqz}}</view>
								</picker>
							</view>
						</view>
					</uni-forms-item>
				</uni-forms>
				<view class="btn">
					<button type="primary" size="mini" @click="handleSearch">查询</button>
					<button type="default" plain="true" size="mini" @click="resetForm">重置</button>
				</view>
			</view>
		</view>
		<view class="con">
			<view style="margin-left: 20rpx;" class="tableTitle">
				<view class="lsbt"></view><text>历史申报记录</text>
			</view>
			<!--type="selection" @selection-change="selectionChange"  -->
			<view class="table">
				<uni-table ref="table" border stripe emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" width="50rpx"></uni-th>
						<uni-th align="center" width="145rpx">房屋地址</uni-th>
						<uni-th align="center" width="80rpx">纳税人名称</uni-th>
						<uni-th align="center" width="140rpx">税款所属期</uni-th>
						<uni-th align="center" width="90rpx">申报类型</uni-th>
						<uni-th align="center" width="130rpx">应补(退)税额</uni-th>
						<uni-th align="center" width="90rpx">申报时间</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in sbxxLists" :key="index">
						<uni-td align="center">
							<checkbox-group @change="checkboxChange">
								<checkbox :value="String(index)" :checked="checkboxIndex===index" />
							</checkbox-group>
						</uni-td>
						<uni-td align="center">{{item.address}}</uni-td>
						<uni-td align="center">{{item.nsrmc}}</uni-td>
						<uni-td align="center">{{item.skssq}}</uni-td>
						<uni-td align="center">{{item.sblx}}</uni-td>
						<uni-td align="center">{{item.ybtse}}</uni-td>
						<uni-td align="center">{{item.sbsj}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="cxjg">查询结果共有<text class="jgzs">{{pageData.total}}</text>条，当前为第<text
					class="dqws">{{pageData.pageIndex}}</text>页
			</view>
			<view class="fy">
				<uni-pagination :total="pageData.total" :pageSize="pageData.pageSize" :current="pageData.pageIndex"
					@change="pageChange" title="标题文字" prev-text="前一页" next-text="后一页" />
			</view>
		</view>
		<view class="sm">说明：仅支持查询该功能上线以后的数据</view>
		<view class="btn">
			<button type="primary" size="mini" @click="goSbxq">查询申报详情</button>
		</view>
	</view>
</template>

<script>
	import {
		ystFsPageZlxxByQO,
		getXzqhByQO,
	} from "@/utils/common-api.js"
	import commonTools from "@/utils/common-tools.js";
	export default {
		data() {
			return {
				userInfo: commonTools.getUserInfo() || {},
				tabAction: "tabItem1",
				nsrlx: "0",
				title: 'picker',
				startDate: "2000-01-01",
				endDate: "2999-12-31",
				// 参数
				address: "", //地址
				xzqhszDm: "", //区（县）dm
				nsrmc: "", //纳税人名称
				sbrqq: "申报日期起",
				sbrqz: "申报日期止",
				// 市
				cityList: [],
				cityArr: [],
				cityIndex: 0,
				// 区（县）
				countyArr: [],
				countyIndex: 0,
				countyLists: [],

				// 租赁信息
				sbxxLists: [],
				pageData: {
					total: 0,
					pageIndex: 1,
					pageSize: 5,
				},
				checkboxIndex: "",
				xzSbData: "",
				formData: ""
			}
		},
		onLoad() {
			this.fsxqpz()
			this.getCounty()
			this.getJymsj()
		},
		onShow() {
			this.handleSearch()
			// 获取近一个月起止时间

		},
		methods: {
			// 缴款日期起修改
			sbrqqChange: function(e) {
				this.sbrqq = e.detail.value
			},
			// 缴款日期止修改
			sbrqzChange: function(e) {
				this.sbrqz = e.detail.value
			},
			// 租赁信息查询
			async handleSearch() {
				this.xzSbData = ""
				this.checkboxIndex = ""
				let sbrqq = this.sbrqq
				let sbrqz = this.sbrqz
				if (sbrqq == "申报日期起") {
					sbrqq = ""
				}
				if (sbrqz == "申报日期止") {
					sbrqz = ""
				}
				let params = {
					userType: this.nsrlx,
					...this.pageData,
					sjXzqhszDm: this.cityList[this.cityIndex],
					qjXzqhszDm: this.xzqhszDm,
					sbrqq: sbrqq,
					sbrqz: sbrqz,
					address: this.address,
					nsrmc: this.nsrmc
				}
				// console.log(params)
				let res = await ystFsPageZlxxByQO(params)
				if (res.body && res.head.errorCode == "0") {
					this.sbxxLists = res.body.data
					this.pageData.total = res.body.pager.recordCount
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}
				// console.log(res)
			},
			//重置表单
			resetForm() {
				//行政区dm
				this.xzqhszDm = ""
				this.countyIndex = 0

				this.address = "" //地址
				this.handleSearch()
				this.getJymsj()
			},
			// 分页切换
			pageChange(e) {
				// console.log(e)
				this.pageData.pageIndex = e.current
				this.handleSearch()
			},

			// 切换tab页 
			async tabChange(data) {
				if (data == 'item1' && this.tabAction != "tabItem1") {
					this.tabAction = "tabItem1"
					this.nsrlx = "0"
					this.handleSearch()
				}
				if (data == 'item2' && this.tabAction != "tabItem2") {
					this.tabAction = "tabItem2"
					this.nsrlx = "1"
					this.handleSearch()
				}
			},

			// 表格租赁选择
			checkboxChange(e) {
				let index = e.detail.value[0]
				if (index != undefined) {
					this.checkboxIndex = parseInt(index)
					this.xzSbData = this.sbxxLists[parseInt(index)]
				} else {
					this.checkboxIndex = ""
					this.xzSbData = ""
				}
			},
			//申报详情
			goSbxq() {
				if (!this.xzSbData) {
					uni.showToast({
						title: '请选择申报信息',
						icon: 'error',
						duration: 1000
					});
					return
				}
				// console.log(this.xzSbData)
				if (this.cityList[this.cityIndex] == "440100") {
					if (this.xzSbData.sblx == "综合税申报") {
						uni.navigateTo({
							url: "/pages/sbcx/zhsbxq?sbId=" + this.xzSbData.sbId,
						})
					} else if (this.xzSbData.sblx == "印花税申报") {
						uni.navigateTo({
							url: "/pages/sbcx/yhsbxq?sbId=" + this.xzSbData.sbId,
						})
					}
				} else {
					if (this.xzSbData.sblx == "综合税申报") {
						uni.navigateTo({
							url: "/pages/sbcx/zhsbxqFs?sbId=" + this.xzSbData.sbId,
						})
					} else if (this.xzSbData.sblx == "印花税申报") {
						uni.navigateTo({
							url: "/pages/sbcx/yhsbxqFs?sbId=" + this.xzSbData.sbId,
						})
					}else{
						uni.navigateTo({
							url: "/pages/sbcx/tdsysxqFs?sbId=" + this.xzSbData.sbId,
						})
					}
				}
			},
			// 行政区获取
			async getCounty() {
				this.countyArr = []
				this.countyArr.push("请选择")
				let res = await getXzqhByQO({
					sjxzqhszDm: this.cityList[this.cityIndex]
				})
				if (res.head.errorCode == "0") {
					this.countyLists = res.body
					res.body.map(item => {
						this.countyArr.push(item.xzqhmc)
					})
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}
			},
			// 区（县）修改
			async countyChange(e) {
				this.countyIndex = e.detail.value
				if (this.countyIndex !== 0) {
					this.xzqhszDm = this.countyLists[this.countyIndex - 1].xzqhszDm
				}
			},
			// 需求配置
			fsxqpz() {
				let xzh = commonTools.getXzq()
				this.cityList[0] = xzh.xzqhszDm
				this.cityArr[0] = xzh.xzqhmc
				// 佛山出租屋类别配置
				if (xzh.xzqhszDm == "440600") {
					this.fsCity = true
					this.czwlbArr = ['请选择', '住宅', '非住宅', '其他']
					this.czwlbLists = ["01", "02", "03"]
					this.czwlbIndex = 0
				}

			},
			getJymsj() {
				let sbrq = this.$commonCzwjs.getMonthFE()
				this.sbrqq = sbrq[0]
				this.sbrqz = sbrq[1]
			}
		}
	}
</script>

<style>
	.sbzlxxcx {
		background: #ffffff;
		min-height: 1334rpx;
		padding-bottom: 40rpx;
	}

	.title {
		width: 100%;
		height: 80rpx;
		background: #3171d5;
		text-align: center;
		line-height: 80rpx;
		color: white;
	}

	.title .iconfont {
		float: right;
		margin-right: 20rpx;
	}

	.tabPage {
		display: flex;
		height: 90rpx;
		font-size: 30rpx;
	}

	.tabPage>view {
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		flex: 1;
		background: #007aff57;
		color: #ffffff;
	}

	.tabPage .slTip {
		position: relative;
		bottom: 20rpx;
	}

	.tabPage .tabAction {
		color: black;
		background: #ffffff;
		font-weight: bold;
	}

	.sbnsrxx {
		padding: 20rpx 5rpx;
		border-bottom: 5rpx solid #3171d5;
		color: #666666;
		font-size: 28rpx;
	}

	.zlform {
		padding: 20rpx 0 0 0;
	}

	.zlformItem {
		display: flex;
	}

	::v-deep .uni-forms-item__label {
		justify-content: flex-end !important;
		padding-right: 10rpx !important;
		text-align: end;

	}

	::v-deep .uni-forms-item {
		margin-bottom: 10rpx;
		width: 370rpx;
	}

	.selectXlk {
		padding: 0 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		width: 100%;
		font-size: 28rpx;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 10rpx;
		box-sizing: border-box;
		width: 270rpx;
		font-size: 28rpx;
		overflow: hidden;
	}

	.uni-input-placeholder {
		font-size: 28rpx;
	}

	.uni-input {
		color: gray;
	}

	.uni-input-border {
		padding: 0 15rpx;
		height: 70rpx;
		width: 100%;
		font-size: 28rpx;
		color: #666;
		border: 2rpx #e5e5e5 solid;
		border-radius: 10rpx;
		box-sizing: border-box;
	}



	.sbrqxz {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.sbrqxz .selectXlk {
		width: 314rpx;
	}

	.btn {
		text-align: center;
	}

	.btn uni-button {
		width: 240rpx;
		margin: 0 20rpx;
		height: 70rpx;
		line-height: 70rpx;
	}

	.con {
		padding: 10rpx;
		background: #ffffff;
		box-sizing: border-box;
	}

	.tableTitle {
		font-size: 26rpx;
		color: black;
		margin-bottom: 10rpx;
		font-weight: 600;
		position: relative;
	}

	.tableTitle .lsbt {
		position: absolute;
		left: -18rpx;
		top: 4rpx;
		width: 8rpx;
		height: 30rpx;
		background: #1198d3;
		border-radius: 4rpx;
	}

	.table {
		word-break: break-all;
	}

	.uni-table .uni-table-th,
	.uni-table .uni-table-td {
		font-size: 24rpx;
		color: black;
		padding: 10rpx 0rpx;


	}

	.uni-table .uni-table-th {
		background: #f2f2f2;
	}

	.fy {
		margin: 10rpx 5rpx;
	}

	::v-deep .uni-pagination__btn {
		background: #00000063;
		opacit: 1;
	}

	::v-deep .uni-pagination__child-btn {
		color: #ffffff;
	}

	.cxjg {
		font-weight: bold;
		font-size: 26rpx;
		text-align: center;
		margin-top: 10rpx;
	}

	.cxjg .jgzs {
		color: #3171d5;
	}

	.cxjg .dqws {
		color: red;
	}

	.sblsh {
		color: #3171d5 !important;
	}

	::v-deep .uni-checkbox-input {
		margin-right: 1rpx;
	}

	.sm {
		font-size: 24rpx;
		padding: 20rpx;
		color: #66666699;
	}

	.jksjxz {
		display: flex;
		align-items: center;
		justify-content: space-between
	}
</style>